<template>
    <div class="content">
      <el-button type="text" @click="centerDialogVisible = true"
        >新增知识点</el-button
      >
  
      <el-dialog
        title="新增知识点"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
      >
        <el-form ref="form" :model="form">
          <el-form-item label="新知识点">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleAdd">添 加</el-button>
        </span>
      </el-dialog>
      <div class="content-table">
        <el-table
          :data="
            tableData.filter(
              (data) =>
                !search || data.name.toLowerCase().includes(search.toLowerCase())
            )
          "
        style="width: 100%" height="600"
        >
          <el-table-column label="日期" prop="time"> </el-table-column>
          <el-table-column label="知识点" prop="name"> </el-table-column>
          <el-table-column align="right">
            <template slot="header" slot-scope="{}">
              <el-input
                v-model="search"
                placeholder="输入关键字搜索"
                prefix-icon="el-icon-search"
              />
            </template>
            <template slot-scope="scope">
              <el-button
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删 除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        tableData: [
          {
            date: "2016-05-02",
            name: "王小虎",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
          },
        ],
        form: {},
        search: "",
        centerDialogVisible: false,
      };
    },
    methods: {
      handleDelete(index, row) {
        console.log(row)
              this.$confirm("此操作永久删除当前数据，是否继续？", "提示", {
                  type: 'info'
              }).then(() => {
                  //2.做删除业务
                  this.$axios.post("/knowledge/delete/" + row.name).then((res) => {
                      if (res.data.code == 200) {
                          this.$message.success("删除成功");
                      } else {
                          this.$message.error("删除失败");
                      }
                  }).finally(() => {
                      this.getData();
                  });
              }).catch(() => {
                  //3.取消删除
                  this.$message.info("取消删除操作");
              });
      },
  
      handleAdd() {
        this.$axios
          .post("/knowledge/add/", this.form)
          .then((res) => {
            console.log(res.data);
            //如果操作成功，关闭弹层，显示数据
            if (res.data.code == 200) {
              this.centerDialogVisible = false;
              this.$message.success("添加成功");
            } else if (res.data.code == 300) {
              this.$message.error("添加失败");
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .finally(() => {
            this.getData();
          });
      },
      getData() {
        this.$axios.get("/knowledge/get/").then((response) => {
          console.log(response);
          this.tableData = response.data.data;
        });
      },
    },
  
    created: function () {
      this.getData();
    },
  };
  </script>
  
  <style scoped>
  .content-table {
    width: 90%;
    height: 660;
  }
  
  .content {
    position: relative;
    width: 1550px;
    height: 660px;
    margin: 20px auto;
    background-color: rgb(255 255 255);
    -webkit-box-shadow: 3px 3px 6px rgb(196, 189, 189);
    -moz-box-shadow: 3px 3px 6px rgb(196, 189, 189);
    box-shadow: 3px 3px 6px rgb(196, 189, 189);
  }
  </style>
  